<template>
	<div style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100%;">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-row :gutter="5">
					<el-col :span="5">
						<h2 style="padding-top: 0.5rem;">门诊排班信息总览</h2>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="门诊排班表" name="first">
						<div class="new-titlee"> 门诊排班表</div>
						<el-table :data="table1" style="width: 100%">
							<el-table-column prop="roomname" align="center" width="120" label="科室名">
							</el-table-column>
							<el-table-column prop="xq1" label="星期一">
							</el-table-column>
							<el-table-column prop="xq2" label="星期二">
							</el-table-column>
							<el-table-column prop="xq3" label="星期三">
							</el-table-column>
							<el-table-column prop="xq4" label="星期四">
							</el-table-column>
							<el-table-column prop="xq5" label="星期五">
							</el-table-column>
							<el-table-column prop="xq6" label="星期六">
							</el-table-column>
							<el-table-column prop="xq7" label="星期日">
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="儿童医院门诊安排表" name="second">
						<div class="new-titlee"> 儿童医院门诊安排表</div>
						<el-table :data="table2" style="width: 100%">
							<el-table-column prop="roomname" align="center" width="120" label="科室名">
							</el-table-column>
							<el-table-column prop="xq1" label="星期一">
							</el-table-column>
							<el-table-column prop="xq2" label="星期二">
							</el-table-column>
							<el-table-column prop="xq3" label="星期三">
							</el-table-column>
							<el-table-column prop="xq4" label="星期四">
							</el-table-column>
							<el-table-column prop="xq5" label="星期五">
							</el-table-column>
							<el-table-column prop="xq6" label="星期六">
							</el-table-column>
							<el-table-column prop="xq7" label="星期日">
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="节假日门诊安排" name="third">
						<div class="new-titlee"> 节假日门诊安排</div>
						<div class="new-item">
							<ul>
								<li>
									<a href="#">• 关于2021年端午节假日门诊安排的通知<span class="time">2021-06-09</span> </a>
								</li>
								<li>
									<a href="#">• 关于2021年“五一”节假期门诊安排的通知<span class="time">2021-04-29</span> </a>
								</li>
								<li>
									<a href="#">• 关于2021年清明节假期门诊安排的通知<span class="time">2021-03-31</span> </a>
								</li>
								<li>
									<a href="#">• 关于2021年春节假期门诊安排的通知<span class="time">2021-02-08</span> </a>
								</li>
								<li>
									<a href="#">• 关于2021年元旦假期门诊安排的通知<span class="time">2020-12-30</span> </a>
								</li>
								<li>
									<a href="#">• 关于2020年中秋、国庆节假期门诊安排的通知<span class="time">2020-09-30</span> </a>
								</li>
								<li>
									<a href="#">• 关于2020年端午节假期门诊安排的通知<span class="time">2020-06-24</span> </a>
								</li>

								<li>
									<a href="#">• 关于2020年五一假期门诊安排的通知<span class="time">2020-04-29</span> </a>
								</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane label="停换诊通知" name="fourth">
						<div class="new-titlee"> 停换诊通知</div>
						<div class="new-item">
							<ul>
								<li>
									<a href="#">• 2021.05.14呼吸内科姜永前停诊通知<span class="time">2021-05-13</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.13普外科王加祥停诊通知<span class="time">2021-05-13</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.12停诊通知<span class="time">2021-05-12</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.13内分泌科任向东停诊通知<span class="time">2021-05-12</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.12妇产科赵建春停诊通知<span class="time">2021-05-12</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.12耳鼻喉科闻国华停诊通知<span class="time">2021-05-12</span> </a>
								</li>

								<li>
									<a href="#">• 2021.05.12神经内科李浒停诊通知<span class="time">2021-05-12</span> </a>
								</li>

								<li>
									<a href="#">2021.05.15妇科潘铁梅停诊通知<span class="time">2021-05-12</span> </a>
								</li>
							</ul>
						</div>
					</el-tab-pane>
					<el-tab-pane label="新增排班" name="fifth">
						<div class="new-titlee"> 新增排班</div>
						<div>
							<el-row style="padding-left: 16rem;" :gutter="20">
								<el-col :span="8">
									<div style="text-align: left;" class="sub-title">输入医生姓名：</div>
									<el-input placeholder="输入医生姓名" v-model="input" clearable>
									</el-input>
								</el-col>
								<el-col :span="8">
									<div style="text-align: left;" class="sub-title">输入科室姓名：</div>
									<el-input placeholder="输入科室姓名" v-model="input" clearable>
									</el-input>
								</el-col>
							</el-row>

							<el-row style="padding-left: 12rem; padding-top:1.5rem;" :gutter="15">
								<el-col :span="20">
									<div style="text-align: left; padding-top: 0.75rem;" class="sub-title"> 选择工作时间：
									</div>
									<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
										<el-checkbox v-for="city in cities" :label="city" :key="city">
											<div style="margin: 15px 0;">{{city}}</div>
										</el-checkbox>
									</el-checkbox-group>


								</el-col>
							</el-row>
						</div>
						<div style="text-align: center; padding-top: 1.75rem;">
							<el-button @click="abc">提交排班信息</el-button>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
	</div>

</template>

<script>
	const cityOptions = ['星期一上', '星期二上', '星期三上', '星期四上', '星期五上', '星期六上', '星期日上', '星期一下', '星期二下', '星期三下', '星期四下', '星期五下',
		'星期六下', '星期日下',
	];
	export default {

		data() {
			return {
				value1: '',
				activeName: 'first',
				table1: [{
					roomname: '内科',
					xq1: '小张（上）',
					xq2: '小张（上）',
					xq3: '小张（上）',
					xq4: '小张（上）',
					xq5: '小张（上）',
					xq6: '小张（上）',
					xq7: '小张（上）'
				}, {
					roomname: '外科',
					xq1: '小张（上）',
					xq2: '小张（上）',
					xq3: '小张（上）',
					xq4: '小张（上）',
					xq5: '小张（上）',
					xq6: '小张（上）',
					xq7: '小张（上）'
				}, {
					roomname: '骨科',
					xq1: '小张（上）',
					xq2: '小张（上）',
					xq3: '小张（上）',
					xq4: '小张（上）',
					xq5: '小张（上）',
					xq6: '小张（上）',
					xq7: '小张（上）'
				}, {
					roomname: '皮肤科',
					xq1: '小张（上）',
					xq2: '小张（上）',
					xq3: '小张（上）',
					xq4: '小张（上）',
					xq5: '小张（上）',
					xq6: '小张（上）',
					xq7: '小张（上）'
				}],
				table2: [{
						roomname: '儿内科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					}, {
						roomname: '儿外科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					}, {
						roomname: '皮肤科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					},
					{
						roomname: '营养科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					},
					{
						roomname: '儿童保健',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					},
					{
						roomname: '骨 科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					},
					{
						roomname: '眼 科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					},
					{
						roomname: '儿童内分泌科',
						xq1: '小张（上）',
						xq2: '小张（上）',
						xq3: '小张（上）',
						xq4: '小张（上）',
						xq5: '小张（上）',
						xq6: '小张（上）',
						xq7: '小张（上）'
					}

				],

				input: '',
				checkedCities: [],
				cities: cityOptions,
				isIndeterminate: true
			};
		},
		methods: {
			handleClick(tab, event) {
				//console.log(tab, event);
			},
			goBack() {
				console.log('go back');
			},

			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			},
			abc: function() {
				console.log(this.checkedCities)
			}


		}
	};
</script>

<style scoped="scoped">
	.new-titlee {
		text-align: center;
		color: #33333;
		font-size: 24px;
		line-height: 100px;
	}

	.new-item {
		border-top: 1px #e8e8e8 dashed;
		font-family: "微软雅黑";
		color: #333333;
	}

	.time {
		font-size: 16px;
		color: #8c8c8c;
		float: right;
	}

	.new-item li a {
		text-decoration: none;

	}

	a:hover {
		color: #00A0C6;
		text-decoration: none;
		cursor: pointer;
	}

	.new-item li {
		list-style-type: none;
		height: 50px;
		text-indent: 1em;
		text-align: left;
		line-height: 50px;
		border-bottom: 1px dashed #e8e8e8;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sub-title {
		margin-bottom: 10px;
		font-size: 14px;
		color: #8492a6;
	}
</style>
